<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.global.js"></script>
    <link rel="stylesheet" href="css/index.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/public.css" type="text/css" media="all">
</head>
<body>
    <div class="head">
        <div class="head_left">
            <a href=""><img src="img/logo.png"></a>
        </div>
        <div class="head_right">
            <ul>
                <li class="head01"><a href="">官方语言讲解  带你游红岩》</a></li>
                <li class="head02"><a href="">设为首页      |      加入收藏      |      热线： 023-65312300（沙坪坝片区） 023-63303457 （渝中片区）  |  English</a></li>
                <li class="head_search">
                    <input class="f_left" type="text" placeholder="请输入关键字"/>
                    <div class="line f_right"><a><span class="search_button">
                        <div class="on"><a href="">搜索</a></div>
                    </span></a></div>
                </li>
             </ul>     
       </div>
    </div>
     <!--甘牧霖199010232-->
    <div id ="app" v-cloak>
        <ul>
            <li v-for="menu in menus" @mouseover="menu.show = !menu.show" @mouseout="menu.show = !menu.show" >
                <a :href="menu.url">
                    {{menu.name}}
                </a>
                <ul v-show="menu.show">
                    <li v-for="subMenu in menu.subMenus">
                        <a :href="subMenu.url">
                            {{subMenu.name}}
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
  
    <script>
        const data2 = {
            menus: [
                {
                    name:'首页', eng:'Home', url: '#',show: false, subMenus:[]
                 
                },
                {
                    name: '关于红岩', eng:'Hong Yan',url: '#',show: false,subMenus:[
                        {name: '红岩文化',url:'#'},
                        {name: '博物馆机构',url:'#'},
                        {name: '历史沿革',url:'#'}
                    ]
                },
                {
                    name: '公告动态',eng:'Dynamics',url: '#',show: false,subMenus:[
                        {name: '文博信息',url:'#'},
                        {name: '政务平台',url:'#'},
                        {name: '公告',url:'#'},
                        {name: '专题报道',url:'#'}
                    ]
                },
                {
                    name: '馆藏精品',eng:'Collections',url: '#',show: false,subMenus:[
                        {name: '一级文物',url:'#'},
                        {name: '二级文物',url:'#'},
                        {name: '三级文物',url:'#'},
                    ]
                },
                {
                    name: '陈列展览',eng:'Exhibition',url: '#',show: false,subMenus:[
                        {name: '虚拟展览',url:'#'},
                        {name: '基本陈列',url:'#'},
                        {name: '复原陈列',url:'#'},
                        {name: '临时展览',url:'#'},
                        {name: '展览交流',url:'#'}
                        
                    ]
                },
                {
                    name: '研究开发',eng:'Research',url: '#',show: false,subMenus:[
                        {name: '历史研究',url:'#'},
                        {name: '艺术创作',url:'#'},
                        {name: '影音在线',url:'#'},
                        {name: '文创产品',url:'#'},   
                    ]
                },
                {
                    name: '公共教育',eng:'Education',url: '#',show: false,subMenus:[
                        {name: '党性教育',url:'#'},
                        {name: '爱国主题教育',url:'#'},
                        {name: '研学实践教育',url:'#'},
                        {name: '科普教育',url:'#'},    
                    ]
                },
                {
                    name: '参观服务',eng:'Service',url: '#',show: false,subMenus:[
                        {name: '经典介绍',url:'#'},
                        {name: '服务内容',url:'#'},
                        {name: '网上预约',url:'#'},
                        {name: '志愿服务',url:'#'},
                    ]
                },
                {
                    name: '网上预约',eng:'Reservation',url: '#',show: false,subMenus:[
                    ]
                }
            ]
        };
        const nav = Vue.createApp({
                data() {
                    return data2;
                }
            }).mount('#app');
            
    </script>
</body>
</html>